<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="./CSS/login.css">
</head>

<body>

    <div class="shell">
        <h2 class="title" id="dynamicGradient">Login</h2>
        <input type="text" id="username" placeholder="用户名">
        <input type="password" id="password" placeholder="密码">
        <input type="submit" value="登录" id="loginBtn">
        <div class="footer">
            <div class="Remember">
                <input type="checkbox" id="rememberMe">
                <label for="rememberMe">记住我</label>
            </div>
            <button id="Password">去注册</button>

        </div>
    </div>

</body>

<script>
    //登录界面
    document.getElementById('Password').addEventListener('click', function () {
        var title = document.querySelector('.title');
        var loginBtn = document.getElementById('loginBtn');
        var rememberMeLabel = document.querySelector('.Remember');
        var passwordBtn = document.getElementById('Password');
        if (title.innerText === 'Login') {
            title.innerText = 'Register';
            loginBtn.value = '注册';
            rememberMeLabel.style.opacity = '0';
            passwordBtn.innerText = '去登录';
            document.getElementById('username').value = '';
            document.getElementById('password').value = '';
            document.getElementById('username').placeholder = '注册用户名';
            document.getElementById('password').placeholder = '设置密码';
            document.getElementById('password').type = 'password';
        } else {
            title.innerText = 'Login';
            loginBtn.value = '登录';
            rememberMeLabel.style.opacity = '1';
            passwordBtn.innerText = '去注册';
            document.getElementById('username').placeholder = '用户名';
            document.getElementById('password').placeholder = '密码';
            document.getElementById('password').type = 'password';
        }

    });

    //网页随机背景图片
    function setRandomBackground() {
        var images = [
            'url("./images/cloud.jpg")',
            'url("./images/cloud2.jpg")',
            'url("./images/sky.jpg")',
            'url("./images/beach.webp")'
        ];
        var randomImage = images[Math.floor(Math.random() * images.length)];
        document.body.style.backgroundImage = randomImage;
    }

    window.onload = setRandomBackground;

</script>

</html>